<template>
    <div class="Invite">
        <div class="top">
            <TopBar class="aa" :title="'邀请好友'" :url="'/index/my/setting/setting'" :color="'white'"></TopBar>
            <div class="img">

            </div>
            <div class="flo">
                <h1>您的邀请码</h1>
                <h2>RHXFTY</h2>
                <h3>已邀请10人</h3>
                <h4>复制</h4>
                <h5>邀请</h5>
                <h6></h6>
            </div>
        </div>
        <div class="middle">
            <h2>已邀请用户</h2>
        </div>
        <div class="bottom">
            <div class="main">
                <div class="bottom-img"></div>
                <div class="bottom-content">
                    <p>OMINI.BASS</p>
                    <span>12.3w关注</span>
                </div >
                <div class="bottom-button">
                    <button @click="clickHandler($event)">关注</button>
                </div>

            </div>
            <div class="main">
                <div class="bottom-img"></div>
                <div class="bottom-content">
                    <p>OMINI.BASS</p>
                    <span>12.3w关注</span>
                </div >
                <div class="bottom-button">
                    <button @click="clickHandler($event)">关注</button>
                </div>

            </div> <div class="main">
            <div class="bottom-img"></div>
            <div class="bottom-content">
                <p>OMINI.BASS</p>
                <span>12.3w关注</span>
            </div >
            <div class="bottom-button">
                <button @click="clickHandler($event)">关注</button>
            </div>

        </div>
            <div class="main">
                <div class="bottom-img"></div>
                <div class="bottom-content">
                    <p>OMINI.BASS</p>
                    <span>12.3w关注</span>
                </div >
                <div class="bottom-button">
                    <button @click="clickHandler($event)">关注</button>
                </div>

            </div>
            <div class="main">
                <div class="bottom-img"></div>
                <div class="bottom-content">
                    <p>OMINI.BASS</p>
                    <span>12.3w关注</span>
                </div >
                <div class="bottom-button">
                    <button @click="clickHandler($event)">关注</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TopBar from "../../../component/TopBar";
    export default {
        name: "Invite",
        components:{
            TopBar
        },
        data(){
            return{

            }
        },
        methods:{
            clickHandler(e){
                e.currentTarget.textContent==='关注'&&( e.currentTarget.textContent='已关注')||(e.currentTarget.textContent='关注')
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .Invite
        .bottom
          padding 0.15rem
          .main
            margin-bottom 0.2rem
            display flex
            .bottom-button
              flex 1.5

              button
                width 0.5rem
                height 0.25rem
                text-align center
                line-height 0.2rem
                font-size 0.13rem
                background-color #6F60EC
                border-radius 0.2rem
                color #ffffff
                margin-top 0.05rem
                outline none
                border none

            .bottom-content
              flex 7
              span
                color #cccccc
                font-size 0.12rem

            .bottom-img
              background url("../../../assets/img/my-back.jpg") no-repeat
              background-size 100%
              border-radius 50%
              margin-right 0.1rem
              flex 1.2
        .middle
          padding 0.15rem 0 0 0.15rem
          h2
            font-weight 600
        .aa
          padding 0.3rem 0 0 0.2rem
        .top
          height 4rem
          background #897DEF
          position relative

          .flo
              width: 3rem
              height 1.5rem
              background-color #ffffff
              position absolute
              top 1.3rem
              left 0.36rem
              border-radius 2%
              padding 0.12rem

              h1
                font-weight 500

              h2
                font-size 0.25rem
                position absolute
                left 0.4rem
                top 0.5rem

              h3
                font-size 0.13rem
                font-weight 400
                position absolute
                bottom 0.15rem
                left 0.15rem

              h4
                height 0.24rem
                width 0.6rem
                background-color #ffffff
                color #cccccc
                border 1px solid #cccccc
                position absolute
                border-radius 0.24rem
                text-align center
                line-height 0.24rem
                right 0.2rem
                top 0.45rem
                font-size 0.13rem

              h5
                height 0.24rem
                width 0.6rem
                background-color #897DEF
                border-radius 0.24rem
                text-align center
                line-height 0.24rem
                position absolute
                right 0.2rem
                bottom 0.15rem
                color #ffffff
                font-size 0.13rem

              h6
                width 0.053rem
                height 0.45rem
                background-color black
                position absolute
                left 0
                top 0.45rem
          .img
            height 3rem
            width 100%
            background url("../../../assets/img/invite.svg") no-repeat
            background-size 100%
            margin-top 0.7rem


</style>